<template>
  <span class="show-word-limit">
    <span :class="{
      'is-limit': getStrLen(propValue) > maxlength
    }">{{getStrLen(propValue)}}</span>/{{maxlength}}
  </span>
</template>

<script>
import { getStrLen } from "@/utils";
export default {
  name: "ShowWordLimit",
  props: {
    value: {
      type: [String, Number],
      default: ""
    },
    maxlength: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      propValue: this.value
    };
  },
  watch: {
    value(v) {
      this.propValue = v;
    }
  },
  methods: {
    getStrLen
  }
};
</script>

<style lang="scss" scoped>
.show-word-limit {
  background: #ffffff;
  display: inline-block;
  padding: 0 5px;
  line-height: normal;
  font-size: 12px;
  color: #909399;
  .is-limit {
    font-weight: 700;
    color: #ff3535;
  }
}
</style>